<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="Scripts/jquery-1.7.1.min.js"></script>
	<script type="text/javascript" src="Scripts/jquery.jqdock.min.js"></script>
  	<style type="text/css">
	body{
		  *filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=0, Color="#000000");  
		}
		#tooltip{
			z-index:50px;
			position:absolute;
			font-family:"隶书";
			color:#fff;			
			font-size:larger;
							 
			}
			/*每一项的css只需要这里改就可以了*/
		.ItemType{
	font-family:"楷体";
	background:#444;
	font-size:larger;
	font-weight:bold;
	color:#eee;
	border-bottom-style:ridge;
	width:200px;
	border-top-style: solid;	
	border-top-color: #FFF;
	border-bottom-color: #FFF;
			}
			/*这里可以改项下的子项的css*/
		.subItemType{
	font-family:"楷体";
	border-top-color: #960;
	border-right-color: #960;
	border-bottom-color: #960;
	border-left-color: #960;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
			}  
	
	</style>
    <script type="text/javascript">
	function addItem(id,premise)
		{
			//记得把房屋的ID赋值给此元素的ID，这样点击的时候可以获取房屋的ID，然后飞行到指定的位置
			var Item=
			"<div id="+id+" class='ItemType'><table width='200' border='0'><tr> <td> <img width='25' height='40' src='images/selectNode3.png'></td> <td>"+premise+"</td> </tr></table> </div>";
			$("#list").append(Item);			
		}
	function addItem2(id,premise)
		{
			//记得把房屋的ID赋值给此元素的ID，这样点击的时候可以获取房屋的ID，然后飞行到指定的位置
			var Item=
			"<div id="+id+" class='ItemType'><table width='200' border='0'><tr> <td> <img width='28' height='40' src='images/Mark.png'></td> <td>"+premise+"</td> </tr></table> </div>";
			$("#list").append(Item);			
		}
	
	function addSubItem(area,price,type,location)
		{
			var subItem2="<div class='subItemType'><table width='200' border='0'> <tr id='Item'> <td width='60'>面积：</td> <td>"+area+"</td> </tr> <tr id='subItem'></tr> <tr id='Item'> <td width='60'>价格：</td> <td>"+price+"</td> </tr> <tr id='subItem'></tr>  <tr id='Item'> <td width='60'>户型：</td> <td>"+type+"</td> </tr> <tr id='subItem'></tr>  <tr id='Item'> <td width='60'>位置：</td> <td>"+location+"</td> </tr> <tr id='subItem'></tr>  </table></div>";
			$("#list").append(subItem2);
            			
		}	
	function addSubItem2(content)
		{
			var subItem2="<div class='subItemType'><table width='200' border='0'> <tr id='Item'> <td width='60'>内容：</td> <td>"+content+"</td> </tr> </table></div>";
			$("#list").append(subItem2);
            			
		}	
	
	$(document).ready(function(){		
		jQuery(window.parent.document).find("#rightFrame").animate({ width: 0}, 0 );
		
		
		//控制窗口的弹出和收回
		$("#switchBar").mouseover(function(){			
			$("#switch").css("display","block");				
				
		}); 	 		
		  
		$("#switchBar #switch").mouseout(function(){
			$("#switch").fadeOut("slow");
			
		});
		$("#switch").click(function(){
			$("#switch").css("background","#111");
			var imgsrc=$("#SPIC").attr("src");
			if(imgsrc=="images/leftslide2.png")
			{
				//左滑出
				jQuery(window.parent.document).find("#rightFrame").animate({ width: 240}, 1000 );
				$("#SPIC").attr("src","images/rightslide.png");			
				
			}
			else
			{
				//右滑入
				jQuery(window.parent.document).find("#rightFrame").animate({ width: 34}, 1000 );
				$("#SPIC").attr("src","images/leftslide2.png");			
				
			}	
			});
		//离开此页，同时在适当位置显示按钮含义
		$("#leave").mouseover(function(e){
			 var x = 5;     
    		var y = 5; 
			var tooltip="<div id='tooltip'>"+ this.title +"<\/div>"
			$("#list").append(tooltip);				
			 $("#tooltip")   
            .css({	
									
                "top": (e.pageY +y) + "px",   
                "left": (e.pageX +x) + "px"  
            }).show("fast"); 
			 
			});
		$("#leave").mouseout(function(){
			 $("#tooltip").remove(); 
			});
		$("#leave").click(function(){
			jQuery(window.parent.document).find("#rightFrame").fadeOut(2000);			
			});			
		});	
		
    </script>  
 
<title>Right page</title> 


 </head>
 <body >
 <div id="leftFrame" style="position:absolute; top:0px; left:0px; height: 734px; width: 246px;"> 
  <img id="leave" src="images/close3.png" title="隐藏此页"  width="38" height="36" style="position:absolute;top:8px;left:0px;">
   <div id="title" style="color:#F00; font-family:'楷体'; font-size:28px; font-weight:bold; position:absolute;top:10px; left:80px;"></div>      
 <table style="position:absolute; top:50px;" width="245" height="736" border="0">
   <tr>
     <td id="switchBar" class="filter" width="34" height="732" style="position:absolute;left:0px;top:0px; background-color:#777;"> 
     <div id="switch" style=" background:#111;z-index:100;position:absolute;top:300px;left:2px; display:none; width:30px; height:60px;">   
     <img id="SPIC" src="images/rightslide.png" height="60" width="30"/>    
     </div>
     </td>     
     <td id="list" width="154">     
    
      
      </td>
    
   </tr>
 </table>
 </div>

</body>
   </html>




